<style lang="scss" scoped>
	@import '../../assets/login.scss';
</style>

<template>
	<div class="login-container">
		<van-nav-bar title="用户登录" />
		<div class="title">
			<p class="text">欢迎使用</p>
		</div>
		<div class="form">
			<div class="form-item">
				<p class="label">手机号码</p>
				<van-field v-model="form.phone" name="phone" type="number" placeholder="请输入手机号码" size="large" center
					clearable></van-field>
			</div>
			<div class="form-item">
				<p class="label">用户密码</p>
				<van-field v-model="form.password" name="phone" type="password" placeholder="请输入密码" size="large" center
					clearable></van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" block @click="loginFn">登录</van-button>
				<div class="tip">
					<router-link class="link text-left" style="color:#cacaca;" to="/resetPassword">忘记密码</router-link>
					<router-link class="link text-right" to="/register">注册账号</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';

	export default {
		name: 'Login',
		data() {
			return {
				form: {
					phone: '',
					password: ''
				}
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			...mapActions(['handleLogin']),
			async loginFn() {
				if (this.form.phone && this.form.password && this.form.phone !== '' && this.form.password !== '') {
					const {
						errorcode,
						errormsg
					} = await this.handleLogin(this.form);

					if (errorcode === 0) {
						this.$toast.success('登录成功!');
						this.$router.replace('/');
					} else {
						this.$toast(errormsg);
					}
				} else {
					this.$toast('请输入账号和密码!');
				}
			}
		},
		watch: {}
	};
</script>
